
<template>
  <div class="app-container">
    <ZlTable ref="table" url="/sys/user/list" :param.sync="param">
      <template slot="search">
        <el-form :inline="true" :model="param" class="left">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="param.userName" clearable placeholder="输入用户名" />
          </el-form-item>
          <el-form-item label="状态" prop="locked">
            <el-select v-model="param.locked" placeholder="请选择" clearable>
              <el-option label="正常" value="0" />
              <el-option label="锁定" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="query">搜 索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="toolbar">
        <el-row :gutter="10" class="mb10">
          <el-col :span="1.5">
            <el-button size="small" plain type="primary" icon="el-icon-plus" @click="addUser">新 增</el-button>
          </el-col>
        </el-row>
      </template>
      <template slot="cols">
        <el-table-column
          align="center"
          width="50px"
          type="index"
          :index="indexMethod"
        />
        <el-table-column min-width="150px" prop="username" label="用户名" sortable="custom"/>
        <el-table-column prop="realName" label="姓名" min-width="150px" sortable="custom"/>
        <el-table-column prop="locked" label="状态" align="center" width="80" sortable="custom">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.locked === 0" type="success">正常</el-tag>
            <el-tag v-else type="danger">锁定</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" align="center" width="80" sortable="custom">
          <template slot-scope="scope">
            <i v-if="scope.row.sex === 1" class="el-icon-male blue bold" />
            <i v-if="scope.row.sex !== 1" class="el-icon-female pink bold" />
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" align="center" width="140px" show-overflow-tooltip />
        <el-table-column show-overflow-tooltip prop="phone" label="手机号" align="center" width="120" />
        <el-table-column min-width="200px" prop="parent" label="所在组织结构" show-overflow-tooltip>
          <template slot-scope="scope">
            <template v-for="(o,i) in scope.row.parent">
              <el-tag v-if="o.orgType=== 2" :key="i" class="m2">{{ o.orgName }}</el-tag>
              <el-tag v-if="o.orgType=== 3" :key="i" class="m2" type="danger">{{ o.orgName }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="avatar" align="center" label="头像" width="100">
          <template slot-scope="scope">
            <div class="point" @click="handlePictureCardPreview(scope.row.avatar)">
              <el-avatar size="small" :src="scope.row.avatar">
                <img :src="dfHead" />
              </el-avatar>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
              title="编辑"
              type="primary"
              circle
              plain
              class="el-icon-edit"
              size="mini"
              @click.native.prevent="editRow(scope.$index, scope.row)"
            />
            <el-button
              title="重置密码"
              type="danger"
              circle
              plain
              class="el-icon-refresh"
              size="mini"
              @click.native.prevent="resetPassword(scope.$index, scope.row)"
            />
            <el-button
              :title="scope.row.locked === 1 ? '解锁' : '锁定'"
              :type="scope.row.locked === 1 ? 'success' : 'danger'"
              circle
              plain
              :class="scope.row.locked === 1 ? 'el-icon-unlock' : 'el-icon-lock'"
              size="mini"
              @click.native.prevent="lock(scope.row)"
            />
            <el-button
              title="删除"
              type="danger"
              circle
              plain
              class="el-icon-delete"
              size="mini"
              @click.native.prevent="deleteRow(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </template>
    </ZlTable>
    <el-dialog :visible.sync="imgView.dialogVisible" width="500px">
      <img width="100%" :src="imgView.dialogImageUrl" alt="">
    </el-dialog>
  </div>

</template>
<script>

import ZlTable from '@/components/table/table-con'
import { deleteUser, lockUser, resetPassword, unLockUser } from '@/api/user'
export default {
  name: 'User',
  components: { ZlTable },
  data() {
    return {
      dfHead: require('@/assets/image/head.png'),
      param: {
        locked: null,
        userName: null
      },
      imgView: {
        dialogVisible: false,
        dialogImageUrl: null
      }
    }
  },
  methods: {
    handlePictureCardPreview(url) {
      console.log('handlePictureCardPreview',url)
      this.imgView.dialogImageUrl = url;
      this.imgView.dialogVisible = true;
    },
    addUser() {
      const userId = 0
      this.$router.push(`/userEdit/${userId}`)
    },
    indexMethod(index) {
      return (this.$refs.table.pageNum - 1) * this.$refs.table.pageSize + index + 1
    },
    editRow(index, row) {
      const userId = row.userId
      this.$router.push(`/userEdit/${userId}`)
    },
    deleteRow(index, row) {
      this.$confirm('是否删除用户?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser({ ids: [row.userId] }).then((result) => {
          this.$message.success('删除成功')
          this.query()
        })
      })
    },
    lock(row) {
      const lock = row.locked === 1
      const tip = lock ? '解锁' : '锁定'
      this.$confirm('是否要' + tip + '【' + row.realName + '】?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const opt = lock ? unLockUser : lockUser
        opt([row.userId]).then((result) => {
          this.$message.success(tip + '成功')
          this.query()
        })
      })
    },
    resetPassword(index, row) {
      this.$confirm('是否重置用户密码?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetPassword({ ids: [row.userId] }).then((result) => {
          this.$message.success('重置成功')
          this.$alert('默认密码重置为：' + result.data)
          this.query()
        })
      })
    },
    query() {
      this.$refs.table.query()
    }
  }
}
</script>
<style scoped>

</style>
